<template>
  <div class="sz-upload sz-upload-list">
    <div class="item" v-for="file in fileList" :key="file.uid">
      <div class="item-content">
        <div @click="handleClickFile(file)">
          <i
            class="el-icon-document"
            :class="file.status === 'fail' && 'error'"
          ></i>
          <el-tooltip
            :disabled="!file.error"
            class="item"
            effect="dark"
            :content="file.error"
            placement="top"
          >
            <span class="name" :class="file.status === 'fail' && 'error'">{{
              file.name
            }}</span>
          </el-tooltip>
        </div>
        <div>
          <div class="status">
            <template>
              <i
                class="el-icon-circle-check"
                v-show="file.status === 'success'"
              ></i>
              <i
                class="el-icon-circle-close"
                v-show="file.status === 'fail'"
              ></i>
              <span class="percent" v-if="file.status === 'uploading'">
                {{ file.percentage }}%
              </span>
            </template>
          </div>
          <i class="el-icon-close" @click="handleRemove(file)"></i>
        </div>
      </div>
      <el-progress
        v-if="file.status === 'uploading'"
        :stroke-width="2"
        :show-text="false"
        :percentage="file.percentage"
      ></el-progress>
    </div>
  </div>
</template>

<script>
import { copyTextToClipboard } from "@/utils/util.js";
export default {
  name: "SzUploadFileList",
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    copied: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleRemove(file) {
      this.$emit("remove", file);
    },
    handleClickFile(file) {
      if (file.status === "success" && this.copied) {
        copyTextToClipboard(file.url).then(() => {
          this.$message({
            type: "success",
            message: "文件访问地址复制成功！"
          });
        });
      }
    }
  }
};
</script>

<style lang="scss">
@import url("/styles/upload.scss");
</style>
<style lang="scss" scoped>
.sz-upload-list {
  .item {
    &:last-child {
      margin-bottom: 0;
    }
    margin: 8px 0;
    line-height: normal !important;
    &-content {
      border-radius: 2px;
      padding: 2px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-document {
        color: #a8abb2;
        margin-right: 4px;
      }
      .name {
        color: #606266;
        font-weight: 400;
        margin-left: 4px;
      }
      .status {
        .percent {
          font-size: 12px;
          color: #606266;
        }
        .el-icon-circle-check {
          color: #52c41a;
        }
        .el-icon-circle-close {
          color: #ff4d4f;
        }
      }
      .el-icon-close {
        display: none;
        color: #a8abb2;
      }
      &:hover {
        background: #f2f5fc;
        cursor: pointer;
        .el-icon-circle-check {
          display: none;
        }
        .el-icon-circle-close {
          display: none;
        }
        .percent {
          display: none;
        }
        .el-icon-close {
          display: unset !important;
        }
      }
    }
  }
}
</style>
